﻿<template>
    <div class="person">
    <!-- <h2>{{ a }}</h2>
    <h2>{{ list }}</h2> -->
    <ul>
     <li v-for="item in list" :key="item.id">
        {{item.name}}--{{item.age}}
      </li>
    </ul>
   </div>
</template>



<script lang = "ts" setup name="Person">
    import {type PersonInter,type Persons} from '@/types'
    import { ref,reactive ,toRefs,computed,watch, watchEffect} from 'vue';
    
    // let person:PersonInter = {id:'e98219e12',name:"张三",age:60}

    // let personList:Array<PersonInter> = [
    //     {id:'e98219e12',name:'张三',age:18},
    //     {id:'e98219e13',name:'李四',age:19},
    //     {id:'e98219e14',name:'王五',age:20}
    // ]
    // let personList:Persons = [
    //     {id:'e98219e12',name:'张三',age:18},
    //     {id:'e98219e13',name:'李四',age:19},
    //     {id:'e98219e14',name:'王五',age:20}
    // ]

    // 需要在App.vue中设置   <Person a='哈哈哈'/>
    import {defineProps} from 'vue'
    // let x = defineProps(['a','list'])
    // console.log(x.a) 

    // defineProps(['a','list'])
    
    let props = withDefaults(defineProps<{list?:Persons}>(),{
     list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
    })
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>